<template>
  <div id="app">
      <div id="app" class="syMoneyDetails m0auto flex-dire-column">
            <div style="font-size: 0.444444rem;margin-top: 0.648148rem;position:relative;">
                <span>当日收益（元）</span><span class="Totshi" @click="getShuoMing" >?</span>
            </div>
            <div style="font-size: 0.944444rem;">
                <span>￥{{dataDetails.total || 0}}</span>
            </div>
        </div>
        <div class="mokeuaiQwCeng">
            <div class="mokuaiOne flex-dire-row">
                <span v-if="dataDetails.details">个人礼物获得：{{dataDetails.details.myself || 0}}</span>
                <img src="static/image/ic_money.png">
                <span v-if="dataDetails.details">x{{dataDetails.details.personal_ratio}}</span>
            </div>
            <span class="jiastyle">+</span>
            <div class="mokuaiOne flex-dire-row">
                <span v-if="dataDetails.details">房费获得：{{dataDetails.details.room}}</span>
                <img src="static/image/ic_money.png">
                <span v-if="dataDetails.details">x{{dataDetails.details.room_ratio}}</span>
            </div>
            <div v-if="dataDetails.details" v-show="dataDetails.details.family?true:false">
                  <span class="jiastyle">+</span>
                    <div class="mokuaiOne flex-dire-row">
                        <span v-if="dataDetails.details">家族获得：{{dataDetails.details.family}}</span>
                        <img src="static/image/ic_money.png">
                        <span v-if="dataDetails.details">x{{dataDetails.details.family_ratio}}</span>
                    </div>
            </div>
            <div class="jifengzuihou">
                <span v-if="dataDetails.details">{{dataDetails.details.total}}</span>
                <span style="font-size:.277778rem;">积分</span>
            </div>
        </div>
  </div>
</template>

<script>
import getRequests from '../assets/js/common';
export default {
  data () {
    return {
      name:'syRecordDetails',
      dataDetails:{}
    }
  },
  mounted () {
    const month = this.$route.query.month,day = this.$route.query.day;    
	this.https.post(getRequests.getRequests.getEarningsRecord,{
      }).then(res => {
          this.dataDetails = res.data[month].days[day];       
        })
    },
    methods:{
        getShuoMing(){
            this.$router.push({path:'/shengqing_know',query:{noshengqing:1}})
        }
    }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #app {
            width: 10rem;
            margin: 0 auto;
        }
        
        .syMoneyDetails {
            width: 100%;
            height: 3.111111rem;
            color: #fff;
            background: linear-gradient(left, #678ef2, #6b67f1);
            background: -ms-linear-gradient(left, #678ef2, #6b67f1);
            background: -webkit-linear-gradient(left, #678ef2, #6b67f1);
            background: -moz-linear-gradient(left, #678ef2, #6b67f1);
            text-align: center;
        }
        
        .Totshi {
            width: .37037rem;
            height: .37037rem;
            background-color: #fff;
            border-radius: 100%;
            color: #6888f2;
            opacity: 1;
            position: absolute;
            text-align: center;
            line-height: .37037rem;
            font-size: .333333rem;
            top: -0.092593rem;
        }
        
        .mokeuaiQwCeng {
            width: 8.314815rem;
            height: 8.611111rem;
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            margin-top: 1.111111rem;
        }
        
        .mokuaiOne {
            flex-wrap: wrap;
            margin-left: .524074rem;
            font-size: 0.444444rem;
            color: #666;
        }
        
        .mokeuaiQwCeng .jiastyle {
            font-size: .726852rem;
            color: #666;
        }
        
        .mokuaiOne img {
            width: 0.555556rem;
            height: 0.555556rem;
            justify-content: center;
            align-items: center;
            margin-left: .138889rem;
            margin-right: 0.277778rem;
        }
        
        .jifengzuihou {
            font-size: .833333rem;
            color: #6b67f1;
            text-align: center;
            border-top: .018519rem solid #ccc;
            padding-top: 1.342593rem;
            margin-top: .648148rem;
        }
        
        .img_twoOne {
            width: 0.740741rem;
            height: 0.740741rem;
            margin: 0.231481rem auto;
        }
        
        .zuanshiNumbers {
            word-break: normal;
            width: auto;
            display: block;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow: hidden;
        }
</style>
